<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Displaying icons using Sprite and SpriteSheet</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var stage;

	var iconSheet = new Image();

	function init() {
		//find canvas and load images, wait for last image to load
		iconSheet.onload = handleImageLoad;
		iconSheet.src = "assets/icons.png";
	}

	function handleImageLoad() {
		// create a new stage and point it at our canvas:
		// note that we can just pass the id of the canvas:
		stage = new createjs.Stage("testCanvas");

		/*** FIRST: the "simple" approach ***/
		// create a simple SpriteSheet using iconSheet with a frame size of 80x80:
		var data = {images:[iconSheet], frames:{width:80, height:80}};
		var spriteSheet  = new createjs.SpriteSheet(data);

		// create a Sprite to display frames from the sprite sheet:
		var icon1 = new createjs.Sprite(spriteSheet);
        icon1.x = 10;
        icon1.y = 100;

		// because we didn't specify frameData, we have to reference frames by number:
		icon1.gotoAndStop(2);
		stage.addChild(icon1);

		// we'll clone icon1 to save a little work:
		var icon2 = icon1.clone();
		icon2.x += 111;
		icon2.gotoAndStop(5);
		stage.addChild(icon2);

		/*** Next: the more robust approach ***/
		// define sprite sheet data describing the available icons:
		// we can use the form {frameName:frameNumber} in animations because each "sequence" is only a single frame:
		var data = {
			images:[iconSheet],
			frames:{width:80, height:80},
			animations: {trash:0, male:1, wait:2, library:3, female:4, hanger:5, stairs:6, noparking:7}
		}

		// create a SpriteSheet using the data:
	    spriteSheet = new createjs.SpriteSheet(data);

	    // we'll clone icon2, to preserve the x/y, and swap out the SpriteSheet:
	    var icon3 = icon2.clone();
	    icon3.spriteSheet = spriteSheet;
	    icon3.x += 111;

	    // we can reference frames by name now:
	    icon3.gotoAndStop("male");
	    stage.addChild(icon3);

	    var icon4 = icon3.clone();
	    icon4.gotoAndStop("female");
	    icon4.x += 111;
	    stage.addChild(icon4);

	    var icon5 = icon4.clone();
	    icon5.gotoAndStop("trash");
	    icon5.x += 111;
	    stage.addChild(icon5);

	    // finally, we'll add one that just plays through:
	    var icon6 = icon1.clone();
	    icon6.x = icon5.x + 111;
	    icon6.gotoAndPlay(0);
	    stage.addChild(icon6);

		createjs.Ticker.setFPS(3); // slow, so we can see the icons
		createjs.Ticker.addEventListener("tick", stage);
	}

	</script>
	<style>
		#content {
			padding: 10px;
		}
	</style>
</head>
	
<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Spritesheet Icons</h1>
	    <p>Shows two approaches to use <strong>Sprite</strong> to display individual icons or graphics from a <strong>SpriteSheet</strong>.</p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="270"></canvas>
	</div>

	<div id="content">
	The original icons.png file, images from <a href="http://thenounproject.com/">the Noun project</a>:<br/>
	<img src="assets/icons.png"/>
	</div>
</body>
</html>
